<template>
	<view class="activity-detail">
		<!-- 活动图片 -->
		<image class="banner" :src="state.activityInfo.event_pic_url" mode="aspectFill"></image>

		<view class="info-modal">
			<view class="title">{{ state.activityInfo.title }}</view>
			<view class="info-list">
				<view class="info-item">
					<img src="/static/location2.png" class="icon location" />
					<view class="label">活动地址</view>
					<view class="value">{{ state.activityInfo.event_location }}</view>
				</view>

				<view class="info-item">
					<img src="/static/time2.png" class="icon" />
					<view class="label">活动时间</view>
					<view class="value">
						{{ formatDateTime(state.activityInfo.start_time) }}-{{
							formatDateTime(state.activityInfo.end_time)
						}}
					</view>
				</view>

				<view class="info-item">
					<img src="/static/person2.png" class="icon" />
					<view class="label">已报名人数</view>
					<view class="value"><text class="highlight">{{ state.activityInfo.now_count }}</text>/{{
						state.activityInfo.max_count }}人
					</view>
				</view>

				<view class="info-item">
					<img src="/static/time2.png" class="icon" />
					<view class="label">截止报名时间</view>
					<view class="value">{{
						formatDateTime(state.activityInfo.event_deadline)
					}}</view>
				</view>
			</view>
		</view>

		<!-- 活动介绍和报名信息modal -->
		<view class="content-modal">
			<!-- 活动介绍 -->
			<view class="section">
				<view class="section-title">【活动介绍】</view>
				<view class="section-content">{{
					state.activityInfo.event_detail ?? "暂无"
				}}</view>
			</view>

			<!-- 活动介绍 -->
			<view class="section">
				<view class="section-title">【i志愿报名】</view>
				<view class="section-qrcode">
					<image class="qrcode" :src="state.activityInfo.qrcode_url" @tap="previewQrcode"></image>
					<view>i志愿报名，请扫描二维码报名</view>
				</view>
			</view>


			<!-- 报名信息 -->
			<view class="section">
				<view class="section-title">【报名信息】</view>
				<view class="form">
					<view class="form-item" style="padding-bottom: 20px">
						<view class="form-label">
							<text class="required">*</text>
							<text>姓名</text>
						</view>
						<view class="form-input-wrapper">
							<input type="text" v-model="state.formData.name" placeholder="请输入真实姓名"
								placeholder-class="placeholder" @input="handleNameInput" />
							<!-- 自动补全下拉框 -->
							<view v-if="
								state.autoComplete.show &&
								state.autoComplete.filteredList.length > 0
							" class="auto-complete-dropdown">
								<view v-for="(item, index) in state.autoComplete.filteredList" :key="index"
									class="auto-complete-item" @tap.stop="selectFamilyMember(item)">
									<view class="member-info">
										<text class="name">{{ item.family_person_name }}</text>
										<text class="relation">{{
											item.family_person_type === 1
												? "配偶"
												: item.family_person_type === 2
													? "父母"
													: item.family_person_type === 3
														? "兄弟姐妹"
														: item.family_person_type === 4
															? "祖父母/外祖父母"
															: item.family_person_type === 5
																? "孙子/外孙"
																: item.family_person_type === 6
																	? "子女"
																	: ""
										}}</text>
									</view>
									<text class="phone">{{ item.family_person_phone }}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="form-item">
						<view class="form-label">
							<text>政治面貌</text>
						</view>
						<view class="form-input" @click="togglePopup(true)">
							<view class="select">
								<text :class="{ placeholder: !state.formData.political }">
									{{ state.formData.political || "请选择" }}
								</text>
								<text class="arrow">></text>
							</view>
						</view>
					</view>

					<view class="form-item">
						<view class="form-label">
							<text class="required">*</text>
							<text>手机号码</text>
						</view>
						<view class="form-input">
							<input type="number" v-model="state.formData.phone" placeholder="请输入手机号码"
								placeholder-class="placeholder" />
						</view>
					</view>
					<view class="form-item">
						<view class="form-label">
							<text class="required">*</text>
							<text>年龄</text>
						</view>
						<view class="form-input">
							<input type="number" v-model="state.formData.age" placeholder="请输入年龄"
								placeholder-class="placeholder" />
						</view>
					</view>
				</view>
			</view>

			<view class="submit-btn" @click="joinActivity">立即报名</view>
		</view>

		<!-- 报名按钮 -->

		<!-- 添加选择器 -->
		<uni-popup ref="politicalPopup" type="bottom">
			<view class="picker-content">
				<view class="picker-header">
					<text @click="togglePopup(false)">取消</text>
					<text @click="confirmSelect">确定</text>
				</view>
				<picker-view class="picker-view" :value="state.picker.value" @change="onPickerChange">
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in state.picker.options" :key="index">
							{{ item }}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>

		<!-- 添加遮罩层用于点击关闭 -->
		<view v-if="state.autoComplete.show" class="mask" @tap="handleClickOutside"></view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted
} from "vue";
import {
	request,
	formatDateTime
} from "../../js/util.js";
import {
	onLoad
} from "@dcloudio/uni-app";
const politicalPopup = ref(null);

const state = reactive({
	activityInfo: {
		id: "",
		title: "墨香迎新年，春联送祝福",
		address: "五沙镇府服务广场",
		time: "1月20日 9:00-11:00",
		currentNum: 18,
		totalNum: 30,
		event_deadline: "",
		description: "春节是中华民族祈福迎祥的传统节日，贴春联是庆黄子纱墨香节日气氛的文化传统，写春联送喜庆，是弘扬中国民族优秀传统文化的良好形式，是营造和谐向上的社区文化有效途径，是营塑广大民众建设合源幸福社区的有效举措。",
	},
	formData: {
		name: "",
		political: "",
		phone: "",
		age: ""
	},
	picker: {
		options: ["群众", "共青团员", "中共党员", "民主党派"],
		value: [0],
		tempValue: 0,
	},
	familyList: [],
	// 添加自动补全相关状态
	autoComplete: {
		show: false,
		keyword: "",
		filteredList: [],
	},
});

// 获取活动详情
const getActivityDetail = async (id) => {
	// 这里添加获取活动详情的接口调用
	let submitData = {
		condition: {
			// status: 1,
			_id: id,
		},
	};
	const result = await request("selectActivity", submitData);
	if (result.status) {
		state.activityInfo = result.result[0];
	} else {
		uni.showToast({
			title: "获取失败",
			icon: "error",
		});
	}
};

const previewQrcode = () => {
	const qrcodeUrl = state.activityInfo.qrcode_url;
	if (qrcodeUrl) {
		uni.previewImage({
			current: qrcodeUrl,
			urls: [qrcodeUrl]
		});
	} else {
		uni.showToast({
			title: "暂无二维码",
			icon: "none"
		});
	}
}

// 获取家庭成员列表
const getFamilyList = async () => {
	const userId = uni.getStorageSync("userid");
	let submitData = {
		condition: {
			belong_user_id: userId,
		},
	};
	const res = await request("selectFamily", submitData);
	if (res.status) {
		state.familyList = res.result;
	} else {
		uni.showToast({
			title: res.data.msg || "获取家庭成员失败",
			icon: "none",
		});
	}
};
// 统一处理弹窗
const togglePopup = (isShow = true) => {
	if (isShow) {
		politicalPopup.value.open();
	} else {
		politicalPopup.value.close();
	}
};

// 选择器变化
const onPickerChange = (e) => {
	state.picker.tempValue = e.detail.value[0];
};

// 确认选择
const confirmSelect = () => {
	state.formData.political = state.picker.options[state.picker.tempValue];
	togglePopup(false);
};

// 处理输入事件
const handleNameInput = (e) => {
	const keyword = e.detail.value.trim();
	state.autoComplete.keyword = keyword;
	state.autoComplete.show = keyword.length > 0;

	// 过滤匹配的家庭成员
	if (keyword) {
		state.autoComplete.filteredList = state.familyList.filter((item) =>
			item.family_person_name.includes(keyword)
		);
	} else {
		state.autoComplete.filteredList = [];
	}
};

// 选择家庭成员
const selectFamilyMember = (member) => {
	state.formData.name = member.family_person_name;
	state.formData.phone = member.family_person_phone;
	state.formData.political = member.family_person_politics;
	state.formData.age = member.age;
	state.autoComplete.show = false;
	state.autoComplete.keyword = "";
};

// 点击外部关闭自动补全
const handleClickOutside = () => {
	state.autoComplete.show = false;
};

const joinActivity = async () => {
	let submitData = {
		activity_id: state.activityInfo._id,
		belong_user_id: uni.getStorageSync("userid"),
		person_name: state.formData.name,
		person_phone: state.formData.phone,
		person_politics: state.formData.political,
		age: state.formData.age
	};
	const result = await request("joinActivity", submitData);
	if (result.status) {
		uni.showToast({
			title: "报名成功",
			icon: "success",
		});
	} else {
		uni.showToast({
			title: "报名失败",
			icon: "error",
		});
	}
};

// 页面加载
onLoad((options) => {
	console.log("options :>> ", options);
	let id = options.id;

	if (id) {
		state.activityInfo.id = id;
		getActivityDetail(id);
		getFamilyList();
	} else {
		uni.showToast({
			title: "活动ID不存在",
			icon: "none",
		});
	}
});
</script>

<style lang="scss">
.activity-detail {
	min-height: 100vh;
	background-color: #fcf2ee;

	.banner {
		width: 100%;
		height: 310rpx;
		max-height: 310rpx;
		background-color: #eee;
	}

	.info-modal {
		margin: -30rpx 30rpx 0;
		padding: 30rpx;
		background: #ffffff;
		border-radius: 16rpx;
		position: relative;
		z-index: 1;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		padding: 0 0 30rpx;
		border-bottom: 1rpx solid #eeeeee;
		background-color: transparent;
	}

	.info-list {
		background-color: transparent;
		margin-top: 20rpx;
		padding: 0;

		.info-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;

			&:last-child {
				border-bottom: none;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.label {
				color: #666;
				width: 230rpx;
			}

			.value {
				flex: 1;

				.highlight {
					color: #ff4d4f;
				}
			}
		}
	}

	.content-modal {
		margin: 30rpx 30rpx 30rpx;
		padding: 30rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.section {
			margin-top: 0;
			background-color: transparent;
			padding: 0;

			&+.section {
				margin-top: 40rpx;
			}

			.section-title {
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.section-content {
				color: #666;
				line-height: 1.6;
			}

			.section-qrcode {
				width: 100%;
				text-align: center;

				.qrcode {
					width: 130px;
					height: 130px;
					margin-bottom: 10px;
				}
			}
		}
	}

	.form {
		.form-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #eeeeee;

			.form-label {
				width: 180rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.required {
					color: #ff4d4f;
					margin-right: 8rpx;
				}
			}

			.form-input-wrapper {
				flex: 1;
				position: relative;
			}

			.form-input {
				flex: 1;

				input {
					width: 100%;
					height: 90rpx;
					border: none;
					padding: 0;
					font-size: 28rpx;
				}

				.select {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 90rpx;
					border: none;
					padding: 0;
					font-size: 28rpx;

					.arrow {
						color: #999;
						font-family: "宋体";
					}
				}
			}

			.placeholder {
				color: #999;
				font-size: 28rpx;
			}
		}
	}

	.submit-btn {
		margin: 0 30rpx 40rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: linear-gradient(90deg, #ff6b6b, #ff4d4f);
		color: #fff;
		border-radius: 45rpx;
		font-size: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
	}

	.picker-content {
		background-color: #fff;

		.picker-header {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid #eee;

			text {
				font-size: 28rpx;
				color: #333;

				&:last-child {
					color: #ff4d4f;
				}
			}
		}

		.picker-view {
			width: 100%;
			height: 400rpx;

			.picker-item {
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
			}
		}
	}
}

.form {
	.auto-complete-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
		max-height: 400rpx;
		overflow-y: auto;

		.auto-complete-item {
			padding: 20rpx;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border-bottom: none;
			}

			&:active {
				background-color: #f5f5f5;
			}

			.member-info {
				display: flex;
				align-items: center;
				margin-bottom: 8rpx;

				.name {
					font-size: 28rpx;
					color: #333;
					margin-right: 16rpx;
				}

				.relation {
					font-size: 24rpx;
					color: #666;
					background: #f5f5f5;
					padding: 4rpx 12rpx;
					border-radius: 4rpx;
				}
			}

			.phone {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 99;
}
</style>